
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dayin"></use>
                    </svg>
                    <div class="name">打印</div>
                    <div class="fontclass">#icon-dayin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannao"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#icon-diannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wheelchair"></use>
                    </svg>
                    <div class="name">轮椅;</div>
                    <div class="fontclass">#icon-wheelchair</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wuneiwifi"></use>
                    </svg>
                    <div class="name">wuneiwifi</div>
                    <div class="fontclass">#icon-wuneiwifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jianshen"></use>
                    </svg>
                    <div class="name">健身</div>
                    <div class="fontclass">#icon-jianshen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinyongqia1"></use>
                    </svg>
                    <div class="name">信用卡1</div>
                    <div class="fontclass">#icon-xinyongqia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiliao"></use>
                    </svg>
                    <div class="name">医疗</div>
                    <div class="fontclass">#icon-yiliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuanglian"></use>
                    </svg>
                    <div class="name">i-窗帘</div>
                    <div class="fontclass">#icon-chuanglian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuimianxiaolv"></use>
                    </svg>
                    <div class="name">i-睡眠效率</div>
                    <div class="fontclass">#icon-shuimianxiaolv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaolian"></use>
                    </svg>
                    <div class="name">笑脸</div>
                    <div class="fontclass">#icon-xiaolian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyishi"></use>
                    </svg>
                    <div class="name">会议室</div>
                    <div class="fontclass">#icon-huiyishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangong"></use>
                    </svg>
                    <div class="name">办公</div>
                    <div class="fontclass">#icon-bangong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoufeitingchechang"></use>
                    </svg>
                    <div class="name">收费停车场</div>
                    <div class="fontclass">#icon-shoufeitingchechang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yangtai"></use>
                    </svg>
                    <div class="name">阳台</div>
                    <div class="fontclass">#icon-yangtai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiyifuwu"></use>
                    </svg>
                    <div class="name">洗衣服务</div>
                    <div class="fontclass">#icon-xiyifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-changtuqiche"></use>
                    </svg>
                    <div class="name">长途汽车</div>
                    <div class="fontclass">#icon-changtuqiche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hangli"></use>
                    </svg>
                    <div class="name">行李</div>
                    <div class="fontclass">#icon-hangli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_wuyanfang"></use>
                    </svg>
                    <div class="name">icon_无烟房</div>
                    <div class="fontclass">#icon-icon_wuyanfang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dangao"></use>
                    </svg>
                    <div class="name">蛋糕</div>
                    <div class="fontclass">#icon-dangao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingerche"></use>
                    </svg>
                    <div class="name">婴儿车</div>
                    <div class="fontclass">#icon-yingerche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reshui"></use>
                    </svg>
                    <div class="name">热水</div>
                    <div class="fontclass">#icon-reshui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaodu"></use>
                    </svg>
                    <div class="name">消毒</div>
                    <div class="fontclass">#icon-xiaodu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tingchechang"></use>
                    </svg>
                    <div class="name">停车场</div>
                    <div class="fontclass">#icon-tingchechang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangwu"></use>
                    </svg>
                    <div class="name">商务</div>
                    <div class="fontclass">#icon-shangwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shafa"></use>
                    </svg>
                    <div class="name">沙发</div>
                    <div class="fontclass">#icon-shafa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibolu"></use>
                    </svg>
                    <div class="name">微波炉</div>
                    <div class="fontclass">#icon-weibolu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mobilepower"></use>
                    </svg>
                    <div class="name">mobile power 充电宝</div>
                    <div class="fontclass">#icon-mobilepower</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chufang"></use>
                    </svg>
                    <div class="name">厨房</div>
                    <div class="fontclass">#icon-chufang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-menpiao"></use>
                    </svg>
                    <div class="name">门票</div>
                    <div class="fontclass">#icon-menpiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reshui1"></use>
                    </svg>
                    <div class="name">热水</div>
                    <div class="fontclass">#icon-reshui1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiantai"></use>
                    </svg>
                    <div class="name">前台</div>
                    <div class="fontclass">#icon-qiantai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua1"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youyongchi"></use>
                    </svg>
                    <div class="name">游泳池</div>
                    <div class="fontclass">#icon-youyongchi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwubang"></use>
                    </svg>
                    <div class="name">服务帮</div>
                    <div class="fontclass">#icon-fuwubang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-"></use>
                    </svg>
                    <div class="name">汽车</div>
                    <div class="fontclass">#icon-icon-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_lift"></use>
                    </svg>
                    <div class="name">电梯</div>
                    <div class="fontclass">#icon-icon_lift</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon--"></use>
                    </svg>
                    <div class="name">音响</div>
                    <div class="fontclass">#icon-icon--</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhongcan"></use>
                    </svg>
                    <div class="name">中餐</div>
                    <div class="fontclass">#icon-zhongcan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuandaigaihao"></use>
                    </svg>
                    <div class="name">宽带改号</div>
                    <div class="fontclass">#icon-kuandaigaihao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixing"></use>
                    </svg>
                    <div class="name">卫星</div>
                    <div class="fontclass">#icon-weixing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suvqiche"></use>
                    </svg>
                    <div class="name">suv汽车</div>
                    <div class="fontclass">#icon-suvqiche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chazuo"></use>
                    </svg>
                    <div class="name">插座</div>
                    <div class="fontclass">#icon-chazuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reshuiqi1"></use>
                    </svg>
                    <div class="name">热水器</div>
                    <div class="fontclass">#icon-reshuiqi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zihangche"></use>
                    </svg>
                    <div class="name">自行车</div>
                    <div class="fontclass">#icon-zihangche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifilianjiemoren-"></use>
                    </svg>
                    <div class="name">wifi连接（默认）-01</div>
                    <div class="fontclass">#icon-wifilianjiemoren-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clock"></use>
                    </svg>
                    <div class="name">闹钟</div>
                    <div class="fontclass">#icon-clock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongjiao"></use>
                    </svg>
                    <div class="name">公交</div>
                    <div class="fontclass">#icon-gongjiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuang"></use>
                    </svg>
                    <div class="name">床</div>
                    <div class="fontclass">#icon-chuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuifengji1"></use>
                    </svg>
                    <div class="name">吹风机</div>
                    <div class="fontclass">#icon-chuifengji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-canju"></use>
                    </svg>
                    <div class="name">餐具</div>
                    <div class="fontclass">#icon-canju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chengzhong"></use>
                    </svg>
                    <div class="name">称重</div>
                    <div class="fontclass">#icon-chengzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuoxie1"></use>
                    </svg>
                    <div class="name">拖鞋</div>
                    <div class="fontclass">#icon-tuoxie1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xishuyongpin"></use>
                    </svg>
                    <div class="name">洗漱用品</div>
                    <div class="fontclass">#icon-xishuyongpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kafeiji"></use>
                    </svg>
                    <div class="name">咖啡机</div>
                    <div class="fontclass">#icon-kafeiji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiyifen"></use>
                    </svg>
                    <div class="name">洗衣粉</div>
                    <div class="fontclass">#icon-xiyifen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huafangtubiaozhizuomobandinggao-"></use>
                    </svg>
                    <div class="name">鲜花单品</div>
                    <div class="fontclass">#icon-huafangtubiaozhizuomobandinggao-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwu_o"></use>
                    </svg>
                    <div class="name">服务_o</div>
                    <div class="fontclass">#icon-fuwu_o</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reshuihu"></use>
                    </svg>
                    <div class="name">热水壶</div>
                    <div class="fontclass">#icon-reshuihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wifi"></use>
                    </svg>
                    <div class="name">wifi</div>
                    <div class="fontclass">#icon-wifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <div class="name">播放</div>
                    <div class="fontclass">#icon-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiejifuwu"></use>
                    </svg>
                    <div class="name">接机服务</div>
                    <div class="fontclass">#icon-jiejifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiuba"></use>
                    </svg>
                    <div class="name">酒吧</div>
                    <div class="fontclass">#icon-jiuba</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guojichangtu"></use>
                    </svg>
                    <div class="name">国际长途1</div>
                    <div class="fontclass">#icon-guojichangtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-waibiduihuan"></use>
                    </svg>
                    <div class="name">外币兑换</div>
                    <div class="fontclass">#icon-waibiduihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kafeiting"></use>
                    </svg>
                    <div class="name">咖啡厅</div>
                    <div class="fontclass">#icon-kafeiting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youzhengfuwu"></use>
                    </svg>
                    <div class="name">邮政服务</div>
                    <div class="fontclass">#icon-youzhengfuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xishicanting"></use>
                    </svg>
                    <div class="name">西式餐厅</div>
                    <div class="fontclass">#icon-xishicanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zaocan"></use>
                    </svg>
                    <div class="name">早餐</div>
                    <div class="fontclass">#icon-zaocan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanzhihangliyuan"></use>
                    </svg>
                    <div class="name">专职行李员</div>
                    <div class="fontclass">#icon-zhuanzhihangliyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sangnafang"></use>
                    </svg>
                    <div class="name">桑拿房</div>
                    <div class="fontclass">#icon-sangnafang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mishufuwu"></use>
                    </svg>
                    <div class="name">秘书服务</div>
                    <div class="fontclass">#icon-mishufuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaochefuwu"></use>
                    </svg>
                    <div class="name">叫车服务</div>
                    <div class="fontclass">#icon-jiaochefuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yusanzujiefuwu"></use>
                    </svg>
                    <div class="name">雨伞租借服务</div>
                    <div class="fontclass">#icon-yusanzujiefuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caxiefuwu"></use>
                    </svg>
                    <div class="name">擦鞋服务</div>
                    <div class="fontclass">#icon-caxiefuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duozhongyuyanfuwurenyuan"></use>
                    </svg>
                    <div class="name">多种语言服务人员</div>
                    <div class="fontclass">#icon-duozhongyuyanfuwurenyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangjianxiaodu"></use>
                    </svg>
                    <div class="name">房间消毒</div>
                    <div class="fontclass">#icon-fangjianxiaodu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zujiebijiben"></use>
                    </svg>
                    <div class="name">租借笔记本</div>
                    <div class="fontclass">#icon-zujiebijiben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanjiafuwu"></use>
                    </svg>
                    <div class="name">管家服务</div>
                    <div class="fontclass">#icon-guanjiafuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yicixingxishuyongpin"></use>
                    </svg>
                    <div class="name">一次性洗漱用品</div>
                    <div class="fontclass">#icon-yicixingxishuyongpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tigongfapiao"></use>
                    </svg>
                    <div class="name">提供发票</div>
                    <div class="fontclass">#icon-tigongfapiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lvyoufuwu"></use>
                    </svg>
                    <div class="name">旅游服务</div>
                    <div class="fontclass">#icon-lvyoufuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoufeijieji"></use>
                    </svg>
                    <div class="name">收费接机</div>
                    <div class="fontclass">#icon-shoufeijieji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-waisongxiyifuwu"></use>
                    </svg>
                    <div class="name">外送洗衣服务</div>
                    <div class="fontclass">#icon-waisongxiyifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinyongqiajiesuanfuwu"></use>
                    </svg>
                    <div class="name">信用卡结算服务</div>
                    <div class="fontclass">#icon-xinyongqiajiesuanfuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yicixingzhangdanjiesuanfuwu"></use>
                    </svg>
                    <div class="name">一次性账单结算服务</div>
                    <div class="fontclass">#icon-yicixingzhangdanjiesuanfuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bufenshijianduandatangjingli"></use>
                    </svg>
                    <div class="name">部分时间段大堂经理</div>
                    <div class="fontclass">#icon-bufenshijianduandatangjingli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bufenshijianduanqiantaifuwu"></use>
                    </svg>
                    <div class="name">部分时间段前台服务</div>
                    <div class="fontclass">#icon-bufenshijianduanqiantaifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuansuojichangbanche"></use>
                    </svg>
                    <div class="name">穿梭机场班车</div>
                    <div class="fontclass">#icon-chuansuojichangbanche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dulilinyujian"></use>
                    </svg>
                    <div class="name">独立淋浴间</div>
                    <div class="fontclass">#icon-dulilinyujian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuanzhenfuyin"></use>
                    </svg>
                    <div class="name">传真、复印</div>
                    <div class="fontclass">#icon-chuanzhenfuyin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chahu"></use>
                    </svg>
                    <div class="name">茶壶</div>
                    <div class="fontclass">#icon-chahu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanyifuwu"></use>
                    </svg>
                    <div class="name">翻译服务</div>
                    <div class="fontclass">#icon-fanyifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duomeitiyanshixitong"></use>
                    </svg>
                    <div class="name">多媒体演示系统</div>
                    <div class="fontclass">#icon-duomeitiyanshixitong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ganxifuwu"></use>
                    </svg>
                    <div class="name">干洗服务</div>
                    <div class="fontclass">#icon-ganxifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggongquyubiludianshijiankongxitong"></use>
                    </svg>
                    <div class="name">公共区域闭路电视监控系统</div>
                    <div class="fontclass">#icon-gonggongquyubiludianshijiankongxitong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guojichangtudianhua"></use>
                    </svg>
                    <div class="name">国际长途电话</div>
                    <div class="fontclass">#icon-guojichangtudianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangjianneigaosushangwang"></use>
                    </svg>
                    <div class="name">房间内高速上网</div>
                    <div class="fontclass">#icon-fangjianneigaosushangwang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huaxueyongjujicun"></use>
                    </svg>
                    <div class="name">滑雪用具寄存</div>
                    <div class="fontclass">#icon-huaxueyongjujicun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guoneichangtudianhua"></use>
                    </svg>
                    <div class="name">国内长途电话</div>
                    <div class="fontclass">#icon-guoneichangtudianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyinglipin"></use>
                    </svg>
                    <div class="name">欢迎礼品</div>
                    <div class="fontclass">#icon-huanyinglipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kafeihu"></use>
                    </svg>
                    <div class="name">咖啡壶</div>
                    <div class="fontclass">#icon-kafeihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefangWIFIfugaimianfei"></use>
                    </svg>
                    <div class="name">客房WIFI覆盖免费</div>
                    <div class="fontclass">#icon-kefangWIFIfugaimianfei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lvyoujiaotongtu"></use>
                    </svg>
                    <div class="name">旅游交通图</div>
                    <div class="fontclass">#icon-lvyoujiaotongtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-libinfuwu"></use>
                    </svg>
                    <div class="name">礼宾服务</div>
                    <div class="fontclass">#icon-libinfuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kemianfeixiedaichongwu"></use>
                    </svg>
                    <div class="name">可免费携带宠物</div>
                    <div class="fontclass">#icon-kemianfeixiedaichongwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kongtiao"></use>
                    </svg>
                    <div class="name">空调</div>
                    <div class="fontclass">#icon-kongtiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lvyoupiaowufuwu"></use>
                    </svg>
                    <div class="name">旅游票务服务</div>
                    <div class="fontclass">#icon-lvyoupiaowufuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lvyoupiaowuzhuangui"></use>
                    </svg>
                    <div class="name">旅游票务专柜</div>
                    <div class="fontclass">#icon-lvyoupiaowuzhuangui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mianfeibaozhi"></use>
                    </svg>
                    <div class="name">免费报纸</div>
                    <div class="fontclass">#icon-mianfeibaozhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mianfeipingzhuangshui"></use>
                    </svg>
                    <div class="name">免费瓶装水</div>
                    <div class="fontclass">#icon-mianfeipingzhuangshui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangwufuwu"></use>
                    </svg>
                    <div class="name">商务服务</div>
                    <div class="fontclass">#icon-shangwufuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoufeidianying"></use>
                    </svg>
                    <div class="name">收费电影</div>
                    <div class="fontclass">#icon-shoufeidianying</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuoxie"></use>
                    </svg>
                    <div class="name">拖鞋</div>
                    <div class="fontclass">#icon-tuoxie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoudongchuanglian"></use>
                    </svg>
                    <div class="name">手动窗帘</div>
                    <div class="fontclass">#icon-shoudongchuanglian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suoyougonggongjisirenchangsuoyanjinxiyan"></use>
                    </svg>
                    <div class="name">所有公共及私人场所严禁吸烟</div>
                    <div class="fontclass">#icon-suoyougonggongjisirenchangsuoyanjinxiyan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yarongbei"></use>
                    </svg>
                    <div class="name">鸭绒被</div>
                    <div class="fontclass">#icon-yarongbei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiedaichongwuxuewaishoufei"></use>
                    </svg>
                    <div class="name">携带宠物需额外收费</div>
                    <div class="fontclass">#icon-xiedaichongwuxuewaishoufei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youxianpindao"></use>
                    </svg>
                    <div class="name">有线频道</div>
                    <div class="fontclass">#icon-youxianpindao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zheguangchuanglian"></use>
                    </svg>
                    <div class="name">遮光窗帘</div>
                    <div class="fontclass">#icon-zheguangchuanglian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yejingdianshiji"></use>
                    </svg>
                    <div class="name">液晶电视机</div>
                    <div class="fontclass">#icon-yejingdianshiji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhenxianbao"></use>
                    </svg>
                    <div class="name">针线包</div>
                    <div class="fontclass">#icon-zhenxianbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyinliuyan"></use>
                    </svg>
                    <div class="name">语音留言</div>
                    <div class="fontclass">#icon-yuyinliuyan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanzhimentong"></use>
                    </svg>
                    <div class="name">专职门童</div>
                    <div class="fontclass">#icon-zhuanzhimentong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Vdianyachazuo"></use>
                    </svg>
                    <div class="name">110V电压插座</div>
                    <div class="fontclass">#icon-Vdianyachazuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-majiang"></use>
                    </svg>
                    <div class="name">麻将</div>
                    <div class="fontclass">#icon-majiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bingxiang"></use>
                    </svg>
                    <div class="name">冰箱</div>
                    <div class="fontclass">#icon-bingxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dulixiezitai"></use>
                    </svg>
                    <div class="name">独立写字台</div>
                    <div class="fontclass">#icon-dulixiezitai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuju"></use>
                    </svg>
                    <div class="name">厨具</div>
                    <div class="fontclass">#icon-chuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianfanguo"></use>
                    </svg>
                    <div class="name">电饭锅</div>
                    <div class="fontclass">#icon-dianfanguo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duozhongguigedianyuanchazuo"></use>
                    </svg>
                    <div class="name">多种规格电源插座</div>
                    <div class="fontclass">#icon-duozhongguigedianyuanchazuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianziciqiamensuo"></use>
                    </svg>
                    <div class="name">电子磁卡门锁</div>
                    <div class="fontclass">#icon-dianziciqiamensuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiezhanfuwu"></use>
                    </svg>
                    <div class="name">接站服务</div>
                    <div class="fontclass">#icon-jiezhanfuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiaoweipin"></use>
                    </svg>
                    <div class="name">调味品</div>
                    <div class="fontclass">#icon-tiaoweipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-muyujian"></use>
                    </svg>
                    <div class="name">沐浴间</div>
                    <div class="fontclass">#icon-muyujian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaobingxiang"></use>
                    </svg>
                    <div class="name">小冰箱</div>
                    <div class="fontclass">#icon-xiaobingxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yugang"></use>
                    </svg>
                    <div class="name">浴缸</div>
                    <div class="fontclass">#icon-yugang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yushifangdahuazhuangjing"></use>
                    </svg>
                    <div class="name">浴室放大化妆镜</div>
                    <div class="fontclass">#icon-yushifangdahuazhuangjing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhiyinshui"></use>
                    </svg>
                    <div class="name">直饮水</div>
                    <div class="fontclass">#icon-zhiyinshui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyi"></use>
                    </svg>
                    <div class="name">浴衣</div>
                    <div class="fontclass">#icon-yuyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuoyi"></use>
                    </svg>
                    <div class="name">座椅</div>
                    <div class="fontclass">#icon-zuoyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yushifangdahuazhuangjing1"></use>
                    </svg>
                    <div class="name">浴室放大化妆镜</div>
                    <div class="fontclass">#icon-yushifangdahuazhuangjing1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zaoju"></use>
                    </svg>
                    <div class="name">灶具</div>
                    <div class="fontclass">#icon-zaoju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baoxianxiang"></use>
                    </svg>
                    <div class="name">保险箱</div>
                    <div class="fontclass">#icon-baoxianxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duogongnengchongdianqi"></use>
                    </svg>
                    <div class="name">多功能充电器</div>
                    <div class="fontclass">#icon-duogongnengchongdianqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weishengjian1"></use>
                    </svg>
                    <div class="name">卫生间</div>
                    <div class="fontclass">#icon-weishengjian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuandai"></use>
                    </svg>
                    <div class="name">宽带</div>
                    <div class="fontclass">#icon-kuandai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoufeikuandai"></use>
                    </svg>
                    <div class="name">收费宽带</div>
                    <div class="fontclass">#icon-shoufeikuandai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoufeiWIFI"></use>
                    </svg>
                    <div class="name">收费WIFI</div>
                    <div class="fontclass">#icon-shoufeiWIFI</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yugang2"></use>
                    </svg>
                    <div class="name">浴缸</div>
                    <div class="fontclass">#icon-yugang2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duozhongguigedianyuanchazuo1"></use>
                    </svg>
                    <div class="name">多种规格电源插座</div>
                    <div class="fontclass">#icon-duozhongguigedianyuanchazuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zihangche1"></use>
                    </svg>
                    <div class="name">自行车</div>
                    <div class="fontclass">#icon-zihangche1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yundouji"></use>
                    </svg>
                    <div class="name">熨斗机</div>
                    <div class="fontclass">#icon-yundouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoshidatangjingli"></use>
                    </svg>
                    <div class="name">24小时大堂经理</div>
                    <div class="fontclass">#icon-xiaoshidatangjingli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yugang1"></use>
                    </svg>
                    <div class="name">浴缸</div>
                    <div class="fontclass">#icon-yugang1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
